<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>payment</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="icon" href="img/favicon.png" />
		<!-- Place favicon.ico in the root directory -->

		<!-- all css here -->
		<!-- bootstrap.min.css -->
		<link rel="stylesheet" href="css/shortcode/btn-new.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- font-awesome.min.css -->
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<!-- owl.carousel.css -->
		<link rel="stylesheet" href="css/owl.carousel.css">
		<!-- owl.carousel.css -->
		<link rel="stylesheet" href="css/meanmenu.min.css">
		<!-- shortcode/shortcodes.css -->
		<link rel="stylesheet" href="css/shortcode/shortcodes.css">
		<!-- nivo-slider.css -->
		<link rel="stylesheet" href="css/nivo-slider.css">
		<!-- style.css -->
		<link rel="stylesheet" href="style.css">
		<!-- responsive.css -->
		<link rel="stylesheet" href="css/responsive.css">
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body>
		<header>
			<!-- header-top-area-start -->
			<div class="header-top-area black-bg ptb-7 hidden-xs">
				<div class="container">
					<div class="row">
						<div class="col-lg-3 col-md-3 col-sm-4">
							<div class="header-top-left">
								<span><a href="#">Call us toll free:</a>(+1)866-550-3669</span>
							</div>
						</div>
						<div class="col-lg-9 col-md-9 col-sm-8">
							<div class="header-top-right">
								<ul>
									<li class="slide-toggle"><a href="login.html"><i class="fa fa-user"></i> LoginOut</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- header-top-area-end -->
			<!-- header-bottom-area-start -->
			<div class="header-bottom-area bg-color-1 ptb-25">
				<div class="container">
					<div class="row">
						<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
							<div class="logo">
								<a href="index.html"><img src="img/logo.png" alt="" /></a>
							</div>
						</div>
						<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
							<div class="header-bottom-middle">
								<div class="search-box">
									<form>
										<input type="text" placeholder="Search...">
										<button><i class="fa fa-search"></i></button>
									</form>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<!-- header-bottom-area-end -->
		</header> <!-- header -->
		<!-- mainmenu-area-start -->
		<div class="mainmenu-area bg-color-2 hidden-xs hidden-sm">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3">
						<div class="mainmenu-left visible-lg checkout-page  visible-md">

						</div>
					</div>
				</div>
				<div class="col-lg-9 col-md-9">
					<div class="mainmenu">
						<nav>
							<ul>
								<li><a href="index.html">Home</a></li>
								<li><a href="shop.html">Shop</a></li>
								<li><a href="cart.html">Cart</a></li>
								<li><a href="login.html">Login</a></li>
								<li><a href="order.html">Order</a></li>
								<li><a href="myaccount.html">My Account</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		</div>
		<!-- mainmenu-area-end -->
		<!-- breadcrumb start -->
		<div class="breadcrumb-area">
			<div class="container">
				<ol class="breadcrumb">
					<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
					<li class="active">Patment</li>
				</ol>
			</div>
		</div>
		<!-- breadcrumb end -->
		<!-- Pay-main-area start -->
		<!-- Page Inner -->
		<div class="page-inner" style="height: -webkit-fill-available;">

			<div id="main-wrapper">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<div class="panel panel-white">
							<div class="panel-body">
								<form class="form-horizontal" action="">
									<!-- 
											<form action="/submit-cat-photo">
											<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
											<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
											<label><input type="checkbox" name="personality" checked> Loving</label>
											<label><input type="checkbox" name="personality"> Lazy</label>
											<label><input type="checkbox" name="personality"> Energetic</label>
											<input type="text" placeholder="cat photo URL" required>
											<button type="submit">Submit</button>
											</form> -->
									<div class="form-group">
										<label for="userAccount" class="col-sm-2 control-label">Receiver:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="receiver" placeholder="请输入接收人姓名">
										</div>
									</div>
									<div class="form-group">
										<label for="address" class="col-sm-2 control-label">Ship To:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="address" placeholder="请输入收件地址">
										</div>
										<label for="address" class="col-sm-2 control-label"></label>
										<div class="col-sm-10">
											<select style="margin-bottom:15px; margin-top:15px;" class="form-control">
												<option>State</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
											<select style="" class="form-control">
												<option>City</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="userAccount" class="col-sm-2 control-label">Quantity:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="receiver" placeholder="请输入购买数量">
										</div>
									</div>
									<div class="form-group">
										<label for="userAccount" class="col-sm-2 control-label">Mobile:</label>
										<div class="col-sm-10">
											<input type="tel" class="form-control" id="receiver" placeholder="请输入手机号码">
										</div>
									</div>
									<div class="form-group">
										<label for="userAccount" class="col-sm-2 control-label">ZIP code:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="receiver" placeholder="请输入邮政编码">
										</div>
									</div>

									<div>
										<label for="userAccount" class="col-sm-2 control-label">Shipping Method:</label>
										<div class="controls">
											<label>
												<span class="checked"><input type="radio" name="positions" value="toast-top-right" checked=""></span>
												-5天 10$
											</label>
											<label>
												<span><input type="radio" name="positions" value="toast-bottom-right"></span>
												5-10天 5$
											</label>
										</div>
									</div>

									<p class="h4" style="color: red;">Total:$100</p>

									<button class="button button3" style="display:block;margin:0 auto">确认支付</button>

							</div>


							</form>
						</div>
					</div>
				</div>
			</div>
		</div><!-- Main Wrapper -->
		<div class="page-footer">
			<!-- copyright-area-start -->
			<div class="copyright-area text-center bg-color-3">
				<div class="container">
					<div class="copyright-border ptb-30">
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
								<div class="copyright text-left">
									<p>Copyright &copy; 2020.第六组 All rights reserved.</p>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
								<div class="payment text-right">
									<a href="#"><img src="img/payment.png" alt="" /></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- copyright-area-end -->
			<!-- social_block-start -->
			<div id="social_block">
				<ul>
					<li class="facebook"><a href="#">Facebook</a></li>
					<li class="twitter"><a href="#">twitter</a></li>
					<li class="rss"><a href="#">rss</a></li>
					<li class="youtube"><a href="#">youtube</a></li>
					<li class="google-plus"><a href="#">google plus</a></li>
					<li class="pinterest"><a href="#">pinterest</a></li>
				</ul>
			</div>
			<!-- social_block-end -->
		</div>
		</div><!-- /Page Inner -->
		<!-- Javascripts -->
		<script src="js/jquery-3.3.1.min.js"></script>
		<!-- bootstrap.min.js -->
		<script src="js/bootstrap.min.js"></script>
		<!-- nivo.slider.js -->
		<script src="js/jquery.nivo.slider.pack.js"></script>
		<!-- jquery-ui.min.js -->
		<script src="js/jquery-ui.min.js"></script>
		<!-- jquery.magnific-popup.min.js -->
		<script src="js/jquery.magnific-popup.min.js"></script>
		<!-- jquery.meanmenu.min.js -->
		<script src="js/jquery.meanmenu.js"></script>
		<!-- jquery.scrollup.min.js-->
		<script src="js/jquery.scrollup.min.js"></script>
		<!-- owl.carousel.min.js -->
		<script src="js/owl.carousel.min.js"></script>
		<!-- plugins.js -->
		<script src="js/plugins.js"></script>
		<!-- main.js -->
		<script src="js/main.js"></script>
	</body>
</html>
